<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->

      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-table v-loading="loading" :data="tableData" :show-header="false">
          <!-- <el-table-column type="selection" width="50" align="center" /> -->

          <el-table-column label="">
            <template slot-scope="scope">
              <el-card shadow>
                <template slot="header">
                  <h2>
                    {{ scope.row.name }}
                  </h2>
                  <div>
                    <el-tag type="success">{{ scope.row.username }}</el-tag>
                    <el-tag type="info">{{ scope.row.ctime }}</el-tag>
                  </div>

                  <div class="ocontent" :title="scope.row.content">
                    {{ scope.row.content }}
                  </div>
                  <div>
                    <el-button size="small" type="primary" @click="goDetail(scope.row)"
                      >详情</el-button
                    >
                  </div>
                </template>
              </el-card>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.size"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <noticedetaildialog ref="noticedetaildialog"></noticedetaildialog>
  </div>
</template>

<script>
import { noticeService } from "@/api/sysService";
import noticedetaildialog from "./system/snotice/noticedetaildialog.vue";
export default {
  name: "checkinout",
  dicts: [],
  components: { noticedetaildialog },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      tableData: null,
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: undefined,
      // 是否显示弹出层

      // 部门名称
      deptName: undefined,
      // 默认密码
      initPassword: undefined,
      // 日期范围
      dateRange: [],
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],

      defaultProps: {
        children: "children",
        label: "label",
      },

      // 查询参数
      queryParams: {
        page: 1,
        size: 10,
        customerName: undefined,
        phone: undefined,
        status: undefined,
        deptId: undefined,
      },
    };
  },

  created() {
    this.getList();
    // this.getDeptTree();
    // this.getConfigKey("sys.user.initPassword").then(response => {
    //   this.initPassword = response.msg;
    // });
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      noticeService.listHome(this.queryParams).then((response) => {
        this.tableData = response.data.data;
        this.total = response.data.total;
        this.loading = false;
      });
    },

    // 表单重置
    reset() {
      this.form = {
        userId: undefined,
        deptId: undefined,
        username: undefined,
        nickName: undefined,
        password: undefined,
        phone: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: [],
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");

      this.$refs.tree.setCurrentKey(null);
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

    goDetail(row) {
      this.$refs.noticedetaildialog.open(row);
    },
  },
};
</script>

<style scoped>
.ocontent {
  line-height: 30px;
  font-size: 16px;
  /* height: 200px; */
  display: -webkit-box; /* 使用弹性盒子布局 */
  -webkit-box-orient: vertical; /* 设置垂直方向 */
  -webkit-line-clamp: 5; /* 限制显示的行数 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
</style>
